<template>
  <div v-if="Object.keys(currentCommunity).length" id="communities-show">
    <div class="main-container container-limited container-fluid page-holder">
      <div class="easy-container"></div>
      <Header />
      <div class="flex m-t-24">
        <Section class="flex-3" style="min-width: 0" />
        <RightAside class="flex-1 m-l-16" />
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import Header from './Header';
import Section from './Section';
import RightAside from './right_aside/index';
import { formatCommunity } from '../format';

export default {
  name: 'CommunitiesShow', // 社区展示页面
  components: { Header, Section, RightAside },
  computed: {
    ...mapState(['currentCommunity']),
  },
  created() {
    this.loadCommunity();
  },
  destroyed() {
    this.removeCurrentCommunity();
  },
  methods: {
    ...mapActions(['setCurrentCommunity', 'removeCurrentCommunity']),
    // 加载社区数据
    loadCommunity() {
      this.$api.communities.show({ communityId: this.$route.params.communityId })
        .then(res => this.setCurrentCommunity(formatCommunity(res.data)))
        .catch(() => {});
    },
  },
};
</script>

<style></style>
